{% extends 'wxchat/wxbase.html' %}{% load static %}
{% block extra %}
    {% include 'shopping/include/jssdk.html' %}
    <script type="text/javascript">
    wx.ready(function () {
        $('#pay_now').on('click',function(){
            var radio_price = $("input[name='mail_style']:checked").val();
            if(radio_price == undefined){
                weui.alert('请选择邮寄方式?');
                return;
            }
            var params ={
              out_trade_no: $("#out_trade_no").text(),
              csrfmiddlewaretoken:'{{ csrf_token }}',
            }

           $.ajax({
              type: 'POST',
              url: '{% url "pay-order" %}',
              dataType: 'json',
              data: params,
              timeout: 5000,
              success: function(data){
                  if(data.package !=undefined){
                      wxpay(data)
                  }
              },
              error: function(error){
                  weui.alert('商品支付失败!');
                  window.location.href = "{% url 'shopping-list' %}";
              }
            });
        });

        function wxpay(data){
            wx.chooseWXPay({
                  timestamp:data.timestamp,
                  nonceStr: data.nonceStr,
                  package:  data.package ,
                  signType: data.signType,
                  paySign:  data.paySign,
                  success: function(res){
                    if (res.errMsg == "chooseWXPay:ok") {
                        out_trade_no = $("#out_trade_no").text();
                        window.location.replace('{% url "my-order-list" %}?out_trade_no=' + out_trade_no);
                    } else {
                       weui.alert('商品支付失败!');
                    }
                  },
                   cancel: function(res) {
                       out_trade_no = $("#out_trade_no").text();
                       updateOrder(out_trade_no);
                   },
                   fail:function(res){
                       out_trade_no = $("#out_trade_no").text();
                       updateOrder(out_trade_no);
                   }
            });
        }

        function updateOrder(out_trade_no, url){
            var params ={
              out_trade_no: out_trade_no,
              csrfmiddlewaretoken:'{{ csrf_token }}',
              action:"update",
            }

           $.ajax({
              type: 'POST',
              url: '{% url "my-order-list" %}',
              dataType: 'json',
              data: params,
              timeout: 5000,
              success: function(data){
                if(data.success == "true"){
                     $("#out_trade_no").text(data.out_trade_no)
                }
              },
              error: function(error){
                  weui.alert('商品支付失败!');
                  window.location.href = "{% url 'shopping-list' %}";
              }
            });
        }

});

</script>
{% endblock extra %}

{% block container %}
<div class="weui-tab" id="tab">
    <div class="weui-tab__panel">
        <div class="weui-panel weui-panel_access">
       <div class="weui-panel__hd">
            <div class="weui-flex">
                <div><a href="javascript:window.history.back(-1)"><i class="icon iconfont icon-jiantou3 gray " ></i></a></div>
                <div class="weui-flex__item" style="text-align: center;"><span class="detail_title">收银台</span></div>
                <div ><a href="{% url 'shopping-list' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shangcheng10 pink r" ></i></a></div>
            </div>
       </div>
        <div class="weui-panel__bd">
            <div class="weui-form-preview">
                <div class="weui-form-preview__hd" style="text-align: right;">
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">付款金额</label>
                        <em class="weui-form-preview__value font16" id="total_cost_top" > ¥ {{ total_cost|floatformat:"2" }}</em>
                        <span id="out_trade_no" style="display: none" >{{ out_trade_no }}</span>
                    </div>
                </div>
                <div class="weui-form-preview__bd" style="text-align: right;">
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">已优惠</label>
                        <em class="weui-form-preview__value " style="text-decoration:line-through;color: #c0c0c0;" >¥ {{ benefits_totals|floatformat:"2" }}</em>
                    </div>
                </div>
                {% if scores_used %}
                <div class="weui-cells weui-cells_checkbox" style="margin-top: 0;">
                    <label class="weui-cell weui-check__label" for="sel_scores">
                        <div class="weui-cell__hd">
                            <input type="checkbox" class="weui-check" name="sel_scores" id="sel_scores"  {% if flag == 1 %} checked {% endif %}>
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                            <p>积分支付</p>
                        </div>
                         <div class="weui-cell__ft">
                            <p>{{ scores_used }} <i class="icon iconfont icon-jiaoyi pink" ></i></p>
                        </div>
                    </label>
                </div>
                {% endif %}
                <div class="weui-cells weui-cells_checkbox" style="margin-top: 0;display: flex">
                    <label class="weui-cell weui-check__label" for="self_style" style="width:45%">
                        <div class="weui-cell__hd">
                            <input type="radio" class="weui-check" name="mail_style" value="0" id="self_style" {% if mail_style == 0 %} checked {% endif %}>
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                            <p>自提</p>
                        </div>
                         <div class="weui-cell__ft">
                        </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="post_style" style="width:45%">
                        <div class="weui-cell__hd">
                            <input type="radio" class="weui-check" name="mail_style" value="1" id="post_style" {% if mail_style == 1 %} checked {% endif %}>
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                            <p>邮寄</p>
                        </div>
                         <div class="weui-cell__ft">
                            <p>¥ {{ mail_cost|floatformat:"2" }}</p>
                        </div>
                    </label>
                </div>
                <div class="weui-cells" style="margin-top: 0;">
                    <div class="weui-cells__title">商品列表</div>
                    {% for item in items %}
                      <div class="weui-cell">
                        <div class="weui-cell__hd"></div>
                        <div class="weui-cell__bd">
                          <p>{{ item.goods.name }}</p>
                        </div>
                        <div class="weui-cell__ft"> x {{ item.quantity }}</div>
                      </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="weui-tabbar">
         <a href="#" id="pay_now" class="weui-tabbar__item tabbar_item bg-primary" >
            <p class="weui-tabbar__label " style="font-size:18px;"> 立即支付 <span id="total_cost_bottom"> ¥ {{ total_cost }}</span></p>
        </a>

    </div>
</div>

{% endblock container %}

{% block bottomjs %}
    {{ block.super }}
<script>
$(function(){
    $("input[name='mail_style']").on('change', function(){
        var params ={
              out_trade_no: $("#out_trade_no").text(),
              csrfmiddlewaretoken:'{{ csrf_token }}',
        };
        if( $(this).prop("checked") ){
            params.mailstyle = $(this).val();
            mail_cost( params );
        }

    });

    function mail_cost( params ){
        $.ajax({
              type: 'POST',
              url: '{% url "mail-cost" %}',
              dataType: 'json',
              data: params,
              timeout: 5000,
              success: function(data){
                 if(data.success == "true"){
                    $('#total_cost_top').text(' ¥ ' + data.total_cost.toFixed(2));
                    $('#total_cost_bottom').text(' ¥ ' + data.total_cost.toFixed(2));
                 }
                 else{
                    $("#self_style").prop("checked", false);
                    $("#post_style").prop("checked", false);
                 }
              },
              error: function(error){
                  console.log(error);
              }
        });
    };

    $("#sel_scores").on('click', function(){
        var params ={
              out_trade_no: $("#out_trade_no").text(),
              csrfmiddlewaretoken:'{{ csrf_token }}',
        };
        if( $(this).prop("checked") ){
            params.flag = 1;
        }
        else{
            params.flag = 0;
        }
        scoresLimit( params );
    });

    function scoresLimit( params ){
        $.ajax({
              type: 'POST',
              url: '{% url "scores-limit" %}',
              dataType: 'json',
              data: params,
              timeout: 5000,
              success: function(data){
                 if(data.success == "true"){
                    $('#total_cost_top').text(' ¥ ' + data.total_cost.toFixed(2));
                    $('#total_cost_bottom').text(' ¥ ' + data.total_cost.toFixed(2));
                 }
                 else if( data.success == "false" ){
                     $("#sel_scores").prop("checked", false)
                     if( data.errors == "NoScore"){
                         weui.alert('您目前没有积分!');
                     }
                     else if(data.errors == "LessScore"){
                          weui.alert('您的积分不足,无法使用积分支付!');
                     }
                 }
              },
              error: function(error){
                  console.log(error);
              }
        });
    };
});

</script>
{% endblock bottomjs %}